<template>

    <div class="page coach-page">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/coach_training_banner.jpg')">
                <span>赛事信息</span>
                <p>EVENT INFORMATION</p>
            </div>
        </div>
        <!--        <PlatformCrumb back="赛事信息">-->
        <!--        </PlatformCrumb>-->
        <div class="content event-information">
            <div class="tabs">
                <div class="training-content-header">
                    <span>赛事信息</span>
                    <div class="training-content-line"></div>
                </div>
            </div>
            <div class="tabs-container">
                <div class="tabs-con-item" v-for="(item,index) in datalist">
                    <div class="image"><img v-if="item.imgs" :src="item.imgs|filtersImg " alt="">
                        <div class="informatton-particulars">
                            <div class="informatton-title">{{item.name}}</div>
                            <div class="informatton-title">场馆</div>
                            <div class="informatton-details">{{item.venue}}</div>
                            <div class="informatton-details">{{item.address }}</div>
                            <div class="informatton-title">时间</div>
                            <div class="informatton-details">{{item.time}}</div>
                            <div class="informatton-title">参赛年龄</div>
                            <div class="informatton-details">{{item.age}}岁</div>
                        </div>
                    </div>
                    <router-link class="tabs-button" :to="'/eventInformationDetails/'+item.id">查看详情<img
                            src="/images/right_arrow.png"/></router-link>
                </div>
                <el-pagination
                        v-if="total!=0"
                        class="listingpagination"
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="dataForm.pageSize"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {matchGetList} from "../../api/api/web.js"
    import {mapActions} from 'vuex'
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                datalist: [],
                total: 0,
                dataForm: {
                    pageNum: 1,
                    pageSize: 9
                }
            }
        },

        methods: {
            ...mapActions('eventInformation', [
                'fetchList'
            ]),
            handleCurrentChange(val) {
                this.dataForm.pageNum = val
                this.getList()
            },
            getlist() {
                this.fetchList(this.dataForm).then((res) => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.datalist = list
                        this.total = res.data.total
                    }
                })
            },
        },

        created() {
            this.getlist()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");

    .listingpagination {
        text-align: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>
